
<template>
  <div class="box"
       id="sForm13">
    <div class="content">
      <Row type='flex'
           justify='space-between'
           align="middle"
           style='padding:20px'>
        <Row type='flex'
             align="middle">
          <Col style="padding-right:20px;">
          <span style="margin-right:10px;">搜索项:</span>
          <Select v-model="shopInfo"
                  placeholder="请选择"
                  clearable
                  style="width:180px;margin-right:10px;">
            <Option value="1">礼品条码</Option>
            <Option value="2">礼品名称</Option>
          </Select>
          <Input v-model="shopCall"
                 @on-keyup="filterSpace"
                 style="width: 180px" />
          </Col>
          <Col style="padding-right:20px;margin-right:10px;">
          <span style="margin-right:10px;">供应商名称:</span>
          <Input v-model="supplier"
                 @on-keyup="filterSpace"
                 style="width: 180px" />
          </Col>
          <Col style="padding-right:20px;">
          <span style="margin-right:10px;">礼品类型</span>
          <Select v-model="gift"
                  clearable
                  placeholder="请选择"
                  style="width:180px">
            <Option :value='0'>全部</Option>
            <Option :value='1'>自采</Option>
            <Option :value='2'>集采</Option>
          </Select>
          </Col>
          <Col>
          <Col>
          <Button type="primary"
                  style="width:80px;margin-right:20px;"
                  @click="search">查询</Button>
          <Button style="width:80px;"
                  @click="reset">重置</Button>
          </Col>
          </Col>
        </Row>
        <Col><Button type="primary"
                @click="addpkg"
                style="width:80px;">添加</Button></Col>
      </Row>
      <div class="content_list">
        <Table stripe
               :height="this.tableHeight"
               :loading="loading"
               class="table-list"
               :columns="columns7"
               :data="datalist"
               id="mygrid">
          <template slot-scope="{ row }"
                    slot="giftType">
            <span>{{['全部','自采','集采'][row.giftType]}}</span>
          </template>
          <template slot-scope="{ row }"
                    slot="action">
            <i class="iconsys icondetail"
               title="查看详情"
               @click="detailsShow(row)">
            </i>
            <i class="iconsys iconedit"
               title="编辑"
               @click="uptShow(row)">
            </i>
            <Poptip confirm
                    title="你确定要删除吗？"
                    @on-ok="ok(row.productId)"
                    class="poptip_del"
                    @on-cancel="cancel">
              <i class="iconsys icondel"
                 v-if="isDel"
                 title="删除">
              </i>
            </Poptip>
          </template>
        </Table>
      </div>
      <div>
        <div class="content_page">
          <Page :total="total"
                ref="pages"
                :current="data.offset"
                @on-change="selectPage"
                :page-size="data.limit"
                @on-page-size-change="selectSize"
                class-name="page"
                show-sizer
                show-total />
        </div>
      </div>
    </div>
    <Drawer v-model="value3"
            :title="title"
            :mask-closable="true"
            class="shopDrawer"
            width="540"
            @on-close="closed">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="100"
            class="shopDrawer_form"
            v-if="isTrue">
        <FormItem label="供应商性质:"
                  prop="supplierType">
          <Input v-model="formValidate.supplierType"
                 disabled
                 placeholder="最多输入14字"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="供应商名称:"
                  prop="supplierId">
          <Select v-model="formValidate.supplierId"
                  filterable
                  placeholder="请下拉选择"
                  :disabled="disabled"
                  class="popupcontent_input">
            <Option v-for="item in cityList"
                    :value="item.supplierId"
                    :key="item.supplierId">{{ item.supplierName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="礼品类型:"
                  prop="giftType">
          <Select v-model="formValidate.giftType"
                  placeholder="请下拉选择"
                  disabled
                  class="popupcontent_input">
            <Option :value='0'>全部</Option>
            <Option :value='1'>自采</Option>
            <Option :value='2'>采集</Option>
          </Select>
        </FormItem>
        <FormItem label="礼品分类:"
                  prop="categoryId">
          <treeselect v-model="formValidate.categoryId"
                      :options="options"
                      :disable-branch-nodes="true"
                      noResultsText="未搜索符合关键字分类"
                      class="popupcontent_input"
                      noOptionsText="礼品类型为空"
                      placeholder="请下拉选择"
                      :normalizer="normalizer"
                      @select="selectList" />
        </FormItem>
        <FormItem label="礼品名称:"
                  prop="productName">
          <Input v-model="formValidate.productName"
                 :maxlength="50"
                 placeholder="最多可输入50字"
                 @on-keyup="changeName"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="兑换票数:"
                  prop="productTicketPrice">
          <Input v-model="formValidate.productTicketPrice"
                 :maxlength="6"
                 @on-blur="producttickeblur"
                 @on-keyup="changetickeprice"
                 placeholder="输入范围0~999999"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="礼品规格:"
                  prop="spec">
          <Input v-model="formValidate.spec"
                 :maxlength="20"
                 placeholder="最多可输入20字"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="单价:"
                  prop="productPrice">
          <Input v-model="formValidate.productPrice"
                 placeholder="输入范围为0.00~9999.99"
                 :maxlength="7"
                 @on-blur="priceBlur"
                 class="popupcontent_input"
                 @on-keyup="changeprice"></Input>
          <span style="margin-left:10px;">元</span>
        </FormItem>
        <FormItem label="材质:"
                  prop="material">
          <Input v-model="formValidate.material"
                 :maxlength="20"
                 placeholder="最多可输入20字"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="条形码："
                  prop="barCode">
          <Input v-model="formValidate.barCode"
                 @on-keyup="changebarCode"
                 placeholder="请输入13位编码"
                 :maxlength="13"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="上传图片:"
                  prop="productImage"
                  class="set_ct_form_up">
          <!-- <div class="demo-upload-list"
               v-for="(item,index) in uploadList"
               :key="index">
            <template v-if="item.status === 'finished'">
              <img :src="item.url"
                   style="width:96px;height:96px;line-height: 58px;" />
              <div class="demo-upload-list-cover">
                <p v-if="item.url"
                   class="replace_tit"
                   @click="handleRemove(item)">删除</p>
              </div>
            </template>
          </div>
          <Upload ref="upload"
                  :show-upload-list="false"
                  :default-file-list="defaultList"
                  :on-success="handleSuccess"
                  :format="['jpg','jpeg','png']"
                  :max-size="2048"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  :action="$config.uploadImg"
                  style="display: inline-block;width:96px;">
            <img :src="defaultUrl"
                 style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                 alt="">
          </Upload> -->
          <Upload ref="upload"
                  :format="['jpg','png']"
                  :max-size="500"
                  :on-success="handleSuccess"
                  :on-format-error="handleFormatError"
                  :before-upload="handleBeforeUpload"
                  :on-exceeded-size="handleMaxSize"
                  type="drag"
                  :show-upload-list="false"
                  :action="$config.uploadImg"
                  style="display: inline-block;width:96px;">
            <img :src="formValidate.productImage?formValidate.productImage:defaultUrl"
                 style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                 alt="">
            <p v-if="formValidate.productImage"
               class="replace_tit">更换</p>
          </Upload>
          <div style="width:132px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;">提醒：双击图例，上传礼品图片。限制图片格式jpg/png,图片大小最大为500kb
          </div>
        </FormItem>
        <FormItem label="说明:"
                  class="pkgDes"
                  prop="productDesc">
          <Input v-model="formValidate.productDesc"
                 type="textarea"
                 :maxlength="300"
                 :autosize="{minRows: 4,maxRows: 6}"
                 class="popupcontent_input">
          </Input>
          <span class="rol_tipsd"
                style="padding-right:71px;">{{formValidate.productDesc?formValidate.productDesc.length:0}}/300</span>
        </FormItem>
        <FormItem class="shopDrawer_form_btn">
          <Button @click="handleReset"
                  style="width:72px">取消</Button>
          <Button type="primary"
                  @click="handleSubmit"
                  :disabled='isDisabled'
                  style="width:72px;margin-left:20px">确认</Button>
        </FormItem>
      </Form>
      <div class="shop_detail"
           v-if="!isTrue">
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">供应商性质:</span><span class="shop_detail_tit_info">{{formValidate2.supplierType}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">供应商名称:</span><span class="shop_detail_tit_info">{{formValidate2.supplierName}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">礼品类型:</span><span class="shop_detail_tit_info">{{['全部','自采','集采'][formValidate2.giftType]}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">礼品分类:</span><span class="shop_detail_tit_info">{{formValidate2.categoryName}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">礼品名称:</span><span class="shop_detail_tit_info">{{formValidate2.productName}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">兑换票数:</span><span class="shop_detail_tit_info">{{formValidate2.productTicketPrice}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">礼品规则:</span><span class="shop_detail_tit_info">{{formValidate2.spec}}</span></div>
        <!-- <div class="shop_detail_tit">条形码:{{formValidate.barCode}}</div> -->
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">单价:</span><span class="shop_detail_tit_info">{{formValidate2.productPrice}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">材质:</span><span class="shop_detail_tit_info">{{formValidate2.material}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">条形码:</span><span class="shop_detail_tit_info">{{formValidate2.barCode}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">上传图片:</span><span class="shop_detail_tit_info"
                style="padding-top:10px;"><img :src="formValidate2.productImage?formValidate2.productImage:defaultUrl"
                 style="width:96px;height:96px;vertical-align:bottom;"></span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">说明:</span><span class="shop_detail_tit_info">{{formValidate2.productDesc}}</span></div>
        <div class="shop_detail_bottom">
          <Button @click="Reset"
                  style="width:72px">取消</Button>
          <!-- <Button type="primary"
                  @click="Submit"
                  style="width:72px;margin-left:20px;margin-right:24px;">确认</Button> -->
        </div>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getGiftShopList, getProductCategory, creatGiftShop, delGiftShop, getSupplierNameList } from '@/api/setting'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data () {
    return {
      tableHeight: 0,
      value3: false,
      defaultUrl: require('@/assets/images/default.png'),
      shopInfo: null,
      shopCall: null,
      supplier: null,
      disabled: false,
      gift: 0,
      imgName: '',
      visible: false,
      isDel: false,
      total: 10,
      isTrue: true,
      title: '添加礼品商品',
      categoryName: '',
      isDisabled: false,
      isDelete: true,
      loading: false,
      uploadList: [],
      defaultList: [],
      cityList: [],
      data: {
        offset: 1,
        limit: 10,
        'merchantId': this.$store.state.user.merchantId,
        productTypeList: [9],
        productName: this.shopCall,
        barCode: this.shopCall,
        supplierName: this.supplier,
        giftType: this.gift,
        shopId: this.$route.query.id
      },
      giftParmas: {
        shopId: this.$route.query.id,
        'merchantId': this.$store.state.user.merchantId,
        categoryType: 1,
        parentId: 0
      },
      columns7: [
        {
          title: '礼品条码',
          key: 'barCode',
          width: 150,
          align: 'center'
        },
        {
          title: '礼品名称',
          key: 'productName',
          width: 200,
          align: 'center'
        },
        {
          title: '供应商',
          key: 'supplierName',
          width: 150,
          align: 'center'
        },
        {
          title: '单价',
          key: 'productPrice',
          width: 150,
          align: 'center'
        },
        {
          title: '礼品类型',
          slot: 'giftType',
          align: 'center'
        },
        {
          title: '创建日期',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action'
        }
      ],
      options: [],
      normalizer (node) {
        return {
          id: node.categoryId,
          label: node.categoryName,
          children: node.childs && node.childs.length ? node.childs : undefined
        }
      },
      datalist: [
      ],
      formValidate: {
        productId: null,
        supplierType: '',
        supplierId: '',
        giftType: 1,
        productName: '', // 商品名称
        categoryId: null, // 礼品类型
        productTicketPrice: '',
        spec: null,
        material: null,
        barCode: '',
        priceType: 2,
        productType: 9,
        productPrice: '', // 商品价格
        productImage: '', // 商品图片
        productDesc: '', // 商品说明
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId
      },
      formValidate2: {
        supplierType: '',
        supplierId: '',
        SupplierName: null,
        categoryName: null,
        giftType: null,
        productName: '', // 商品名称
        categoryId: null, // 礼品类型
        productTicketPrice: '',
        spec: null,
        material: null,
        barCode: '',
        productPrice: '', // 商品价格
        productImage: '', // 商品图片
        productDesc: '' // 商品说明
      },
      ruleValidate: {
        supplierType: [{ required: true, message: '请输入供应商性质', trigger: 'blur', type: 'string' }],
        supplierId: [{ required: true, message: '请选择供应商名称', trigger: 'change', type: 'string' }],
        productName: [{ required: true, message: '礼品名称不能为空', trigger: 'blur' }],
        giftType: [{ required: true, message: '请选择礼品类型', trigger: 'change', type: 'number' }],
        categoryId: [{ required: true, message: '礼品类型不能为空', trigger: 'blur' }],
        productTicketPrice: [{ required: true, message: '兑换票数不能为空', trigger: 'blur', type: 'string' }],
        productPrice: [{ required: true, message: '礼品单价不能为空', trigger: 'blur', type: 'string' }, { required: true, message: '可输入范围为0.00到9999.99之间', trigger: 'blur', pattern: /^\d{1,4}(\.\d{1,2})?$/ }],
        barCode: [{ required: true, message: '请输入条形码编码', trigger: 'blur', type: 'string' }, {
          required: true,
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (value.length === 13) {
              callback()
            } else {
              callback(new Error('请输入13位条形码编码'))
            }
          }
        }]
        // productImage: [{ required: true, message: '上传图片不能为空' }]
      }
    }
  },
  watch: {
    gift (val) {
    },
    shopInfo (val) {
      this.shopCall = ''
    }
  },
  computed: {
  },
  created () {

  },
  mounted () {
    // this.uploadList = this.$refs.upload.fileList
    this.getList(this.shopInfo)
    this.getGiftList()
    this.getSupplierList()
    if (!this.hasPermission('moms:setting:gift')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    changeprice () {
      this.changeNum()
    },
    // 条形码
    changebarCode () {
      this.formValidate.barCode = this.formValidate.barCode.replace(/\s+/g, '')
    },
    // 获取供应商名称
    getSupplierList () {
      getSupplierNameList({
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.cityList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 去除空格
    filterSpace () {
      this.shopCall = this.shopCall ? this.shopCall.replace(/\s+/g, '') : null
      this.supplier = this.supplier ? this.supplier.replace(/\s+/g, '') : null
    },
    // 查询
    search () {
      this.data.offset = 1
      this.getList(this.shopInfo)
    },
    // 重置
    reset () {
      this.shopInfo = null
      this.supplier = null
      this.shopCall = null
      this.gift = 0
      this.data.offset = 1
      this.getList(this.shopInfo)
    },
    producttickeblur () {
      if (this.formValidate.productTicketPrice) {
        if (this.formValidate.productTicketPrice.length === 1) {
          this.formValidate.productTicketPrice = this.formValidate.productTicketPrice.replace(/[^0-9]/g, '')
        } else {
          this.formValidate.productTicketPrice = this.formValidate.productTicketPrice.replace(/^(0+)|[^\d]+/g, '')
        }
      }
    },
    changetickeprice () {
      if (this.formValidate.productTicketPric) {
        if (this.formValidate.productTicketPrice.length === 1) {
          this.formValidate.productTicketPrice = this.formValidate.productTicketPrice.replace(/[^0-9]/g, '')
        } else {
          this.formValidate.productTicketPrice = this.formValidate.productTicketPrice.replace(/^(0+)|[^\d]+/g, '')
        }
      }
    },
    changeNum () {
      // 如果用户第一位输入的是小数点，则重置输入框内容
      if (this.formValidate.productPrice !== '' && this.formValidate.productPrice.substring(0, 1) === '.') {
        this.formValidate.productPrice = ''
      }
      this.formValidate.productPrice = this.formValidate.productPrice.replace(/^0*(0\.|[1-9])/, '$1')// 粘贴不生效
      this.formValidate.productPrice = this.formValidate.productPrice.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
      this.formValidate.productPrice = this.formValidate.productPrice.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      this.formValidate.productPrice = this.formValidate.productPrice.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      this.formValidate.productPrice = this.formValidate.productPrice.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      if (this.formValidate.productPrice.indexOf('.') < 0 && this.formValidate.productPrice !== '') { // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (this.formValidate.productPrice.substring(0, 1) === '0' && this.formValidate.productPrice.length === 2) {
          this.formValidate.productPrice = this.formValidate.productPrice.substring(1, this.formValidate.productPrice.length)
        }
      }
      if (this.formValidate.productPrice > 9999.99) {
        this.formValidate.productPrice = this.formValidate.productPrice.substring(0, 4)
      }
    },
    priceBlur () {
      this.formValidate.productPrice = this.formValidate.productPrice + ''
      this.formValidate.productPrice = this.formValidate.productPrice.replace(/[^\d.]/g, '')
      if (this.formValidate.productPrice === '') {
        this.formValidate.productPrice = ''
      } else if (this.formValidate.productPrice.indexOf('.') === -1) {
        this.formValidate.productPrice = this.formValidate.productPrice + '.00'
      } else if (this.formValidate.productPrice.indexOf('.')) {
        let ste = this.formValidate.productPrice.substring(this.formValidate.productPrice.indexOf('.') + 1)
        if (!ste) {
          this.formValidate.productPrice = this.formValidate.productPrice + '00'
        }
        if (ste.length === 1) {
          this.formValidate.productPrice = this.formValidate.productPrice + '0'
        } if (ste.length > 2) {
          this.formValidate.productPrice = this.formValidate.productPrice.substring(0, this.formValidate.productPrice.indexOf('.') + 3)
        }
      }
    },
    handleSuccess (response, file, fileList) {
      this.formValidate.productImage = response.full_img_url
      // this.getcicun(this.formValidate.productImage)
    },
    // 获取图片尺寸
    getcicun (url) {
      var img = new Image()
      img.src = url
      var _this = this
      img.onload = function () {
        if (img.width !== 235 && img.height !== 110) {
          _this.formValidate.productImage = ''
          _this.$Notice.warning({
            title: '上传的图片规格不符'
          })
        }
      }
    },
    // 查看
    detailsShow (row) {
      this.value3 = true
      this.isTrue = false
      this.title = '查看礼品商品'
      this.formValidate2 = row
      this.formValidate2.supplierType = '自采供应商'
    },
    changeName () { // 过滤空格
      this.formValidate.productName = this.formValidate.productName.replace(/\s+/g, '')
    },

    selectSize (size) {
      this.data.limit = size
      this.getList()
    },
    // 获取分页列表
    getList (type) {
      this.loading = true
      this.tableHeight = 0
      if (type === '1') {
        getGiftShopList({
          offset: (this.data.offset - 1) * this.data.limit,
          limit: this.data.limit,
          'merchantId': this.$store.state.user.merchantId,
          productTypeList: [9],
          barCode: this.shopCall,
          supplierName: this.supplier,
          giftType: this.gift === 0 ? null : this.gift,
          shopId: this.$route.query.id
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.total = res.data.totalCount
            if (res.data.data) {
              this.datalist = res.data.data
            }
            if (res.data.data && res.data.data.length >= 10) {
              this.tableHeight = 520
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else if (type === '2') {
        getGiftShopList({
          offset: (this.data.offset - 1) * this.data.limit,
          limit: this.data.limit,
          'merchantId': this.$store.state.user.merchantId,
          productTypeList: [9],
          productName: this.shopCall,
          supplierName: this.supplier,
          giftType: this.gift === 0 ? null : this.gift,
          shopId: this.$route.query.id
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.total = res.data.totalCount
            if (res.data.data) {
              this.datalist = res.data.data
            }
            if (res.data.data && res.data.data.length >= 10) {
              this.tableHeight = 520
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        getGiftShopList({
          offset: (this.data.offset - 1) * this.data.limit,
          limit: this.data.limit,
          'merchantId': this.$store.state.user.merchantId,
          productTypeList: [9],
          supplierName: this.supplier,
          giftType: this.gift === 0 ? null : this.gift,
          shopId: this.$route.query.id
        }).then(res => {
          if (res.data.status === 200) {
            this.loading = false
            this.total = res.data.totalCount
            if (res.data.data) {
              this.datalist = res.data.data
            }
            if (res.data.data && res.data.data.length >= 10) {
              this.tableHeight = 520
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    // 添加
    addpkg () {
      this.formValidate = {
        productId: null,
        supplierType: '',
        supplierId: '',
        giftType: 1,
        productName: '', // 商品名称
        categoryId: null, // 礼品类型
        productTicketPrice: '',
        spec: null,
        material: null,
        barCode: '',
        priceType: 2,
        productType: 9,
        productPrice: '', // 商品价格
        productImage: '', // 商品图片
        productDesc: '', // 商品说明
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId
      }
      this.value3 = true
      this.isTrue = true
      this.title = '新增礼品商品'
      this.formValidate.supplierType = '自采供应商'
      this.disabled = false
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '上传的图片大小不能超过500k'
      })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '上传的图片格式错误'
      })
    },
    handleBeforeUpload (file) {
      // console.log(file)
    },
    // 重置
    Reset () {
      this.value3 = false
    },
    // 确认
    Submit () {
      this.value3 = false
    },
    selectList (node) {
      // console.log(node)
    },
    // 分页
    selectPage (page) {
      this.data.offset = page
      this.getList(this.shopInfo)
    },
    // 获取礼品商品类型
    getGiftList () {
      getProductCategory(this.giftParmas).then(res => {
        if (res.data.status === 200) {
          res.data.data.map((ele) => {
            if (ele.parentId === '0' && ele.childs.length === 0) {
              this.$set(ele, 'isDisabled', true)
            }
          })
          this.options = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 删除
    ok (idx) {
      if (this.isDelete) {
        if (!this.isDelete) {
          return
        }
        this.isDelete = false
        if (this.data.offset !== 1) {
          if (this.total % this.data.limit === 1) {
            this.data.offset = this.data.offset - 1
          }
        }
        setTimeout(() => {
          delGiftShop({ productId: idx }).then(res => {
            this.isDelete = true
            if (res.data.status === 200) {
              this.$Message.success('删除成功')
              this.getList()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }, 200)
      }
    },
    cancel () {

    },
    closed () {
      if (this.title !== '查看礼品商品') {
        this.$refs.formValidate.resetFields()
        this.value3 = false
      }
    },
    handleReset (name) {
      this.value3 = false
    },
    handleSubmit () {
      let dataParmas = {
        productId: this.formValidate.productId,
        categoryId: this.formValidate.categoryId,
        productName: this.formValidate.productName,
        productPrice: this.formValidate.productPrice,
        productTicketPrice: this.formValidate.productTicketPrice,
        priceType: 2,
        productDesc: this.formValidate.productDesc,
        productType: 9,
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId,
        giftType: this.formValidate.giftType,
        spec: this.formValidate.spec,
        material: this.formValidate.material,
        supplierId: this.formValidate.supplierId,
        barCode: this.formValidate.barCode,
        productImage: this.formValidate.productImage
      }
      if (this.title === '新增礼品商品') {
        this.$refs.formValidate.validate((val) => {
          if (val) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            setTimeout(() => {
              creatGiftShop({ ...dataParmas }).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('新增成功')
                  this.data.offset = 1
                  this.getList()
                  this.$refs.formValidate.resetFields()
                  this.value3 = false
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          }
        })
      } else if (this.title === '编辑礼品商品') {
        this.$refs.formValidate.validate((val) => {
          if (val) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            setTimeout(() => {
              creatGiftShop({ ...dataParmas }).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('编辑成功')
                  this.getList()
                  this.$refs.formValidate.resetFields()
                  this.value3 = false
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          }
        })
      }
    },
    uptShow (row) {
      this.title = '编辑礼品商品'
      this.formValidate = { ...row }
      this.value3 = true
      this.isTrue = true
      this.formValidate.supplierType = '自采供应商'
      this.disabled = true
      if (row.productPrice === 0) {
        this.formValidate.productPrice = '0'
      } else if (row.productPrice === null) {
        this.formValidate.productPrice = ''
      } else {
        this.formValidate.productPrice = row.productPrice + ''
      }
      if (row.productTicketPrice === 0) {
        this.formValidate.productTicketPrice = '0'
      } else if (row.productTicketPrice === null) {
        this.formValidate.productTicketPrice = ''
      } else {
        this.formValidate.productTicketPrice = row.productTicketPrice + ''
      }
    }
  }

}
</script>
<style lang="less">
#sForm13 {
  .content_page {
    height: 80px;
    line-height: 80px;
    display: flex;
    padding-right: 20px;
    flex-direction: row;
    justify-content: flex-end;
  }
}
.ivu-upload {
  width: 96px;
  height: 96px;
  position: relative;
  .replace_tit {
    position: absolute;
    bottom: 0;
    width: 96px;
    opacity: 0.6;
    background: #2d8cf0;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: #ffffff;
    display: none;
  }
}
</style>
<style>
.ivu-upload:hover .replace_tit {
  display: block;
}
.popupcontent_input {
  width: 280px;
}
.shopDrawer .shopDrawer_form {
  width: 450px;
  margin: auto;
  padding-top: 16px;
}
.shopDrawer .shop_detail .shop_detail_bottom {
  /* position: absolute;
  left: 0;
  right: 0;
  bottom: 16px; */
  text-align: center;
  padding-top: 16px;
  /* border-top: 1px solid #e8eaec; */
}
.shopDrawer .shopDrawer_form .shopDrawer_form_btn {
  /* position: absolute;
  left: 0;
  right: 0;
  bottom: 0; */
  padding-top: 16px;
  /* border-top: 1px solid #e8eaec; */
}
.shopDrawer .shop_detail .shop_detail_tit {
  line-height: 32px;
  font-size: 12px;
  color: #464c5b;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
}
.shopDrawer .shop_detail .shop_detail_tit .shop_detail_tit_name {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  text-align: right;
}
.shopDrawer .shop_detail .shop_detail_tit .shop_detail_tit_info {
  width: 300px;
}
.shopDrawer .shopDrawer_form .shopDrawer_form_btn .ivu-form-item-content {
  text-align: center;
  padding-right: 24px;
}
.poptip_del .ivu-poptip-body .ivu-icon {
  left: 18px;
}
.set_ct_form_up .ivu-form-item-content {
  display: flex;
}
</style>
